<template>
    <l-layout >
        <template #top>
            <div style="text-align: center;padding-top:16px;" >
                <el-radio-group v-model="formData.f_AuthType" size="mini">
                    <el-radio-button label="1">{{ $t('所有成员') }}</el-radio-button>
                    <el-radio-button label="2">{{ $t('指定成员') }}</el-radio-button>
                </el-radio-group>
            </div>
        </template>
        
        <div v-if="formData.f_AuthType == 1" style="padding:0 16px;">
            <el-alert
                :title="$t('权限说明')"
                type="info"
                :description="$t(description)"
                show-icon
                :closable="false"
                >
            </el-alert>
        </div>
        <template v-else-if="formData.f_AuthType == 2" >
            <l-layout :top="40">
                <template #top>
                    <div style="padding-left:8px;float:left;" >
                        <el-button-group>
                            <el-button size="mini" icon="el-icon-plus" @click="handlePostClick">{{$t('岗位')}}</el-button>
                            <el-button size="mini" icon="el-icon-plus" @click="handleRoleClick">{{$t('角色')}}</el-button>
                            <el-button size="mini" icon="el-icon-plus" @click="handleUserClick">{{$t('用户')}}</el-button>
                        </el-button-group>
                    </div>
                    <div style="padding-right:8px;float:right;">
                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleClearClick">{{$t('清空')}}</el-button>
                    </div>
                </template>
                <l-table :columns="columns" :dataSource="tableData" >
                    <template v-slot:type="scope" >
                        {{typeFormat(scope.row.type)}}
                    </template>
                    <l-table-btns :isAuth="false" :btns="tableBtns" @click="handleTableBtnClick" ></l-table-btns>
                </l-table>
            </l-layout>
           
        </template>
        <l-dialog
            :title="$t('添加岗位')"
            :visible.sync="selectPostVisible"
            :height="480"
            width="1024px"

            @ok="handlePostSelectOk"
            @closed="handlePostSelectClosed"
        >
            <l-post-select-panel ref="postSelectPanel" ></l-post-select-panel>
        </l-dialog>

        <l-dialog
            :title="$t('添加角色')"
            :visible.sync="selectRoleVisible"
            :height="480"
            width="800px"

            @ok="handleRoleSelectOk"
            @closed="handleRoleSelectClosed"
        >
            <l-role-select-panel ref="roleSelectPanel" ></l-role-select-panel>
        </l-dialog>

        <l-dialog
            :title="$t('添加用户')"
            :visible.sync="selectUserVisible"
            :height="480"
            width="1024px"

            @ok="handleUserSelectOk"
            @closed="handleUserSelectClosed"
        >
            <l-user-select-panel ref="userSelectPanel" ></l-user-select-panel>
        </l-dialog>
    </l-layout>
</template>

<script>
export default {
    name: 'auth-config',
    props:{
        description:String,
    },
    data () {
        return {
            columns:[
                {label:'类型',prop:'type',width:'60', align: 'center'},
                {label:'名称',prop:'name',minWidth:'100'},
            ],
            tableBtns:[
                {prop:'Delete',label:'删除'}
            ],
            tableData:[],
            formData:{
                f_AuthType:1
            },
            selectPostVisible:false,
            selectRoleVisible:false,
            selectUserVisible:false
        }
    },
    
    computed: {
        
    },
    created () {
        this.lr_loadDblink()
    },
    methods: {
        handlePostClick(){
            this.selectPostVisible = true;
        },
        handlePostSelectClosed(){
            this.$refs.postSelectPanel.resetForm();
        },
        async handlePostSelectOk(){
            let postList = await this.$refs.postSelectPanel.getForm();
            let selectData = postList.map(t=>{return {type:1,id:t.f_PostId,name:t.name} });
            this.addTableData(selectData);
            this.selectPostVisible = false;
        },

        handleRoleClick(){
            this.selectRoleVisible = true;
        },
        handleRoleSelectClosed(){
            this.$refs.roleSelectPanel.resetForm();
        },
        async handleRoleSelectOk(){
            let select = await this.$refs.roleSelectPanel.getForm();
            let selectData = select.map(t=>{return {type:2,id:t.f_RoleId,name:t.f_FullName} });
            this.addTableData(selectData);
            this.selectRoleVisible = false;
        },

        handleUserClick(){
            this.selectUserVisible = true;
        },
        handleUserSelectClosed(){
            this.$refs.userSelectPanel.resetForm();
        },
        async handleUserSelectOk(){
            let select = await this.$refs.userSelectPanel.getForm();
            let selectData = select.map(t=>{return {type:3,id:t.f_UserId,name:t.name} });
            this.addTableData(selectData);
            this.selectUserVisible = false;
        },


        addTableData(selectData){
            let addData = selectData.filter(t=>this.tableData.findIndex(t2=>t2.id == t.id) == -1 );
            this.tableData = this.tableData.concat(addData);
        },
        handleTableBtnClick(btn){
            this.tableData.splice(btn.rowIndex,1);
        },
        handleClearClick(){
            this.tableData = [];
        },
        typeFormat(type){
            switch(type){
                case 1:
                    return this.$t('岗位')
                case 2:
                    return this.$t('角色')
                case 3:
                    return this.$t('用户')
            }
        },


        resetForm(){
            this.$refs.form && this.$refs.form.resetFields();
            this.formData.f_AuthType = 1
            this.tableData = [];
        },
        // 校验表单
        validateForm(callback){
            this.$refs.form.validate((valid) => {
                if(valid){
                    callback();
                }
            });
        },
        setForm(data){
            this.formData.f_AuthType = data.f_AuthType;
            this.tableData = data.authData;
        },
        getForm(){
            return {
                f_AuthType:this.formData.f_AuthType,
                authData:this.tableData
            }
        }
    }
}
</script>

